<!-- 扣费 -->
<template>
    <el-card class="content">
        <el-form size="small" label-width="120px" :inline="true">
            <el-form-item label="时间选择：" class="width100">
                <el-radio-group v-model="tableFrom.date" type="button" class="mr20" size="small"
                    @change="selectChange(tableFrom.date)">
                    <el-radio-button v-for="(item, i) in fromList.fromTxt" :key="i" :label="item.val">{{ item.text
                        }}</el-radio-button>
                </el-radio-group>
                <el-date-picker v-model="timeVal" value-format="yyyy/MM/dd" format="yyyy/MM/dd" size="small"
                    type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 250px;"
                    @change="onchangeTime" />
            </el-form-item>
        </el-form>
        <el-form size="small" label-width="120px" :inline="true">
            <el-form-item label="业务类型：">
                <el-radio-group v-model="tableFrom.type" type="button" class="mr20" size="small"
                    @change="typeChange(tableFrom.type)">
                    <el-radio-button v-for="(item, i) in typeList" :key="i" :label="item.label">{{ item.value
                        }}</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="扣费类型：">
                <el-radio-group v-model="tableFrom.balance" type="button" class="mr20" size="small"
                    @change="balanceChange(tableFrom.balance)">
                    <el-radio-button v-for="(item, i) in balanceList" :key="i" :label="item.label">{{ item.value
                        }}</el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <el-table :data="tableData.list" stripe style="width: 100%;font-size: 13px;">
            <el-table-column prop="title" label="标题" min-width="160">
            </el-table-column>
            <!-- <el-table-column prop="enterprise_name" label="企业名称" min-width="250">
            </el-table-column> -->
            <el-table-column prop="type" label="业务类型" :formatter="typefor" min-width="100">
            </el-table-column>
            <el-table-column prop="balance" label="费用类型" :formatter="balance" min-width="50">
            </el-table-column>
            <el-table-column prop="add_time" label="日期" min-width="180">
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="tableFrom.page" :page-sizes="[20, 30, 50]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.count"
            style="float: right;margin: 10px 0;">
        </el-pagination>
    </el-card>
</template>
<script>
import { fromList } from "@/libs/constants.js";
import { getFeeList } from '@/api/costList'
export default {
    data() {
        return {
            tableFrom: {
                page: 1,
                limit: 20,
                date: '',
                type: '',
                balance: ''
            },
            timeVal: [],
            tableData: [],
            fromList: fromList,
            typeList: [
                {
                    value: '企业年费',
                    label: 1
                }, {
                    value: '用户名片费用',
                    label: 2
                }, {
                    value: '日视频费用',
                    label: 3
                }, {
                    value: '日商品费用',
                    label: 4
                }
            ],
            balanceList: [
                {
                    value: '充值',
                    label: 0
                }, {
                    value: '扣费',
                    label: 1
                },
            ]
        }
    },
    created() {
        this.getList()
    },
    methods: {
        typeChange(type) {
            this.tableFrom.type = type
            this.getList()
        },
        balanceChange(balance){
            this.tableFrom.balance = balance
            this.getList()
        },
        handleSizeChange(val) {
            this.tableFrom.limit = val
            this.getList();
        },
        handleCurrentChange(val) {
            this.tableFrom.page = val
            this.getList();
        },
        selectChange(tab) {
            this.tableFrom.date = tab;
            this.tableFrom.page = 1;
            this.timeVal = [];
            this.getList();
        },
        onchangeTime(e) {
            this.timeVal = e;
            this.tableFrom.date = e ? this.timeVal.join("-") : "";
            this.tableFrom.page = 1;
            this.getList();
        },
        balance(row) {
            switch (row.balance) {
                case 0: return '充值';
                case 1: return '扣费';
            }
        },
        typefor(row) {
            switch (row.type) {
                case 1: return '企业年费';
                case 2: return '用户名片费用';
                case 3: return '日视频费用';
                case 4: return '日商品费用';
            }
        },
        getList() {
            getFeeList(this.tableFrom).then(res => {
                this.tableData = res.data
                console.log(res, 'getFee');
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.content {}
</style>